<!-- 可以为class绑定属性是字符串外，还可以是对象或者数组 -->
<template>
    <h3>Class绑定</h3>
    <p :class="dynamicClass">Class样式绑定属性是字符串</p>
    <!-- 当isActive为true时，active样式生效，当hasError为true时，text-danger样式生效，否则无样式 -->
    <p :class="{'active':isActive,'text-danger':hasError}">Class样式绑定属性是对象1</p>
    <p :class="obj">Class样式绑定属性是对象2</p>
    <p :class="[ClassActive]">Class样式绑定属性是数组</p>
    <!-- 细节：数组和对象嵌套是，只能是数组嵌套对象不能是对象嵌套数组 -->
</template>

<script>
    export default{
        data(){
            return {
                dynamicClass:"red",
                isActive:true,
                hasError:false,
                obj:{
                    'active':true,
                    'text-danger':true
                },
                ClassActive:"classActive"
            }
        }
    }
</script>
<!-- scope:让当前样式只在当前组件中生效 不加则在全局生效-->
<style scoped>
    .red{
        color: red;
    }
    .active{
        color: yellow;
    }
    .text-danger{
        font-size: 50px;
    }
    .classActive{
        color: blue;
    }
</style>